<template>
  <div>
    <h3 class="tree-demo-title-h3">OKR 展示模式显示节点数</h3>
    <p>通过 <code>showNodeNum</code> 可以显示展开的子节点数</p>
    <BaseCard>
      <template v-slot:header>
        <div class="component-wrapper">
          <vue-org-tree
            :data="testData"
            :left-data="testLeftData"
            only-both-tree
            direction="horizontal"
            show-collapsable
            node-key="id"
            label-class-name="no-padding"
            showNodeNum
            :render-content="renderContent"
            :node-btn-content='renderBtnContent'
          ></vue-org-tree>
        </div>
      </template>
      <template>
        <pre
          class="language-css"
          v-html="Prism.highlight(content, Prism.languages.html, 'html')"
        ></pre>
      </template>
    </BaseCard>
  </div>
</template>
<script>
import mixins from "./mixins";
export default {
  mixins: [mixins],
  data() {
    return {
      testData: [
        {
          id: 1,
          label: "xxx科技有有限公司",
          content: "这是一个有活力的公司",
          children: [
            {
              id: 2,
              label: "产品研发部",
              content: "这是一个有活力的产品研发部",
              children: [
                {
                  id: 3,
                  label: "研发-前端",
                  content: "这是一个有活力的研发-前端"
                },
                {
                  id: 4,
                  label: "研发-后端",
                  content: "这是一个有活力的研发-后端"
                },
                {
                  id: 5,
                  label: "UI 设计",
                  content: "这是一个有活力的UI 设计"
                }
              ]
            },
            {
              id: 6,
              label: "销售部",
              content: "这是一个有活力的销售部",
              children: [
                {
                  id: 7,
                  label: "销售一部",
                  content: "这是一个有活力的销售一部"
                },
                {
                  id: 8,
                  label: "销售二部",
                  content: "这是一个有活力的销售二部"
                }
              ]
            }
          ]
        }
      ],
      testLeftData: [
        {
          id: 1,
          label: "xxx科技有有限公司",
          content: "这是一个有活力的公司",
          children: [
            {
              id: 12,
              label: "(左)产品研发部",
              content: "这是一个有活力的产品研发部",
              children: [
                {
                  id: 13,
                  label: "(左)研发-前端",
                  content: "这是一个有活力的研发-前端"
                },
                {
                  id: 14,
                  label: "(左)研发-后端",
                  content: "这是一个有活力的研发-后端"
                },
                {
                  id: 15,
                  label: "(左)UI 设计",
                  content: "这是一个有活力的UI 设计"
                }
              ]
            },
            {
              id: 16,
              label: "(左)销售部",
              children: [
                {
                  id: 17,
                  label: "(左)销售一部",
                  content: "这是一个有活力的销售一部"
                },
                {
                  id: 18,
                  label: "(左)销售二部",
                  content: "这是一个有活力的销售二部"
                }
              ]
            },
            {
              id: 19,
              label: "(左)财务部",
              content: "这是一个有活力的财务部"
            }
          ]
        }
      ],
      content: `<vue-org-tree
  :data="testData"
  :left-data="testLeftData"
  only-both-tree
  direction="horizontal"
  show-collapsable
  node-key="id"
  label-class-name="no-padding"
  showNodeNum
  :render-content="renderContent"
  :node-btn-content='renderBtnContent'
></vue-org-tree>\n
<script>
  export default {
    data () {
      return {
        testData: [{
          id: 1,
          label: 'xxx科技有有限公司',
          content: '这是一个有活力的公司',
          children: [{
            id: 2,
            label: '产品研发部',
            content: '这是一个有活力的产品研发部',
            children: [{
              id: 3,
              label: '研发-前端',
              content: '这是一个有活力的研发-前端',
            }, {
              id: 4,
              label: '研发-后端',
              content: '这是一个有活力的研发-后端',
            }, {
              id: 5,
              label: 'UI 设计',
              content: '这是一个有活力的UI 设计',
            }]
          }, {
            id: 6,
            label: '销售部',
            content: '这是一个有活力的销售部',
            children: [{
                id: 7,
                label: '销售一部',
                content: '这是一个有活力的销售一部',
              },{
                id: 8,
                label: '销售二部',
                content: '这是一个有活力的销售二部',
              }
            ]
          },{
            id: 9,
            label: '财务部',
            content: '这是一个有活力的务部',
          }]
        }],
        testLeftData: [{
          id: 1,
          label: 'xxx科技有有限公司',
          content: '这是一个有活力的公司',
          children: [{
            id: 12,
            label: '(左)产品研发部',
            content: '这是一个有活力的产品研发部',
            children: [{
              id: 13,
              label: '(左)研发-前端',
              content: '这是一个有活力的研发-前端',
            }, {
              id: 14,
              label: '(左)研发-后端',
              content: '这是一个有活力的研发-后端',
            }, {
              id: 15,
              label: '(左)UI 设计',
              content: '这是一个有活力的UI 设计',
            }]
          }, {
            id: 16,
            label: '(左)销售部',
            children: [{
                id: 17,
                label: '(左)销售一部',
                content: '这是一个有活力的销售一部',
              },{
                id: 18,
                label: '(左)销售二部',
                content: '这是一个有活力的销售二部',
              }
            ]
          },{
            id: 19,
            label: '(左)财务部',
            content: '这是一个有活力的财务部',
          }]
        }],
      }
    },
    methods: {
      renderContent (h, node) {
        const cls = ['diy-wrapper']
        if (node.isCurrent) {
          cls.push('current-select')
        }
        if (node.isLeftChild) {
          cls.push('left-child')
        }
        return (
          <div class={cls}>
            <div class="diy-con-name">{node.data.label}</div>
            <div class="diy-con-content">{node.data.content}</div>
          </div>
        )
      }
    }
  }
<\/script>
<style>
.label-class-blue{
  color: #595961;
}
.label-bg-blue{
  background: #1989fa;
  color: #fff;
}
.diy-wrapper{
  padding:10px
}
.no-padding{
  padding: 0 !important;
}
.diy-wrapper.left-child{
  border: 1px solid red;
}
</style>
`
    };
  },
  methods: {
    renderContent(h, node) {
      const cls = ["diy-wrapper"];
      if (node.isCurrent) {
        cls.push("current-select");
      }
      if (node.isLeftChild) {
        cls.push("left-child");
      }
      return (
        <div class={cls}>
          <div class="diy-con-name">{node.data.label}</div>
          <div class="diy-con-content">{node.data.content}</div>
        </div>
      );
    },
    renderBtnContent(h, node) {
      return (
        <div class="org-chart-node-btn-text">{node.childNodes.length || 0}</div>
      );
    }
  }
};
</script>

<style>
.label-class-blue {
  color: #595961;
}
.label-bg-blue {
  background: #1989fa;
  color: #fff;
}
.diy-wrapper {
  padding: 10px;
}
.no-padding {
  padding: 0 !important;
}
.diy-wrapper.left-child {
  border: 1px solid red;
}
</style>
